<template>
	<view>
		<u-gap :height="offsetTop"></u-gap>
		<view class="flex-row  items-center tab-bar">
			<view class="flex-col items-center group_12  flex-1 space-y-8" v-for="(bar,index) in bars"
				@click="goPage(bar.url)" v-if="(index==2&&showReport)||index!=2" :key="index">
				<image class="shrink-0 image_10" :src="bar.icon" mode="widthFix" />
				<text :class="current==index?'activeColor':''">{{bar.name}}</text>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		props: {
			offsetTop: {
				type: Number,
				default: 80
			},
			showReport: {
				type: Boolean,
				default: false
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				bars: [{
						id: 0,
						name: "首页",
						url: '/pages/index/index',
						icon: "/static/bar/index.png",
						selected: true
					},
					{
						id: 1,
						name: "订单",
						url: '/pages/order/order',
						icon: "/static/bar/order.png",
						selected: false
					},
					{
						id: 2,
						name: "数据",
						url: '/pages/report/report',
						icon: "/static/bar/report.png",
						selected: false
					},
					{
						id: 3,
						name: "售后",
						url: '/pages/aftersales/aftersales',
						icon: "/static/bar/aftersales.png",
						selected: false
					},
					{
						id: 4,
						name: "我的",
						url: '/pages/my/my',
						icon: "/static/bar/mine.png",
						selected: false
					}
				]
			};
		},
		methods: {
			goPage(name) {
				console.log(name)
				uni.switchTab({
					url: name
				})

			}
		}

	}
</script>
<style>
	.tab-bar {
		padding: 18rpx 6rpx 6rpx;
		background-color: #fff;
		z-index: 9;
		font-size: 14px;
		position: fixed;
		width: 100vw;
		bottom: 0;
	}

	.image_10 {
		width: 46rpx;
		height: 46rpx;
	}

	.activeColor {
		color: #ff0101;
	}

	.group_12 {
		padding-bottom: 8rpx;
		overflow: hidden;

		height: 122rpx;
	}
</style>